<template>
    <div class="login-box">
        <div class="field">
            <mt-field label="用户名" placeholder="请输入用户名" v-model="username"></mt-field>
            <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
            <!--<mt-field label="验证码" v-model="captcha" placeholder="请输入验证码">-->
                <!--<button class="vcode" @click="vcode" type="button">{{checkCaptcha}}</button>-->
            <!--</mt-field>-->
        </div>
        <div class="btn">
            <mt-button type="primary" class="normal" :disabled="logining" @click="login">
                <div class="btn-box">
                    <span v-if="!logining">登录</span>
                    <mt-spinner type="triple-bounce" color="white" v-if="logining"></mt-spinner>
                </div>
            </mt-button>
        </div>
        <div class="more">
            <div class="link">
                还没有账号？ <router-link :to="{name: 'register'}">马上注册</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    import apiUrl from '../../api/apiUrl'
    import {captcha} from "../../utils/captcha";

    export default {
        name: 'index',
        data () {
            return {
                logining: false,
                username: '',
                password: '',
                captcha: '',
                checkCaptcha: ''
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.check()
                vm.vcode()
                // vm.test()
            })
        },
        methods: {
            test() {
                // ※定位竞猜※   格式:(名次/号码/竞分)
                // ※两面竞猜※   格式:(名次/大小单双/竞分)
                // let str = '123/456单大/100'
                // let reg = /(\d+)\/([\d|单|双|大|小|龙|虎]+)\/(\d+)/

                // ※冠亚和竞猜※   例如:和/4/100,代表冠军和竞猜号码“4”,分数100
                //               例如:和3412+100, 代表冠军和竞猜号码"3".“4”,"12",分数100
                // let str = '和/4/100'
                // let reg = /(和)\/([\d|单|双|大|小]+)\/(\d+)/
                // let str = '和341+100'
                // let reg = /和([1\d|3|4|5|6|7|8|9|单|双|大|小]+)\+(\d+)/ig

                // let str = '124567891'
                // let reg = /([3-9]|1[0-9])/ig

                // 下上回100

                // ※组合竞猜※   例如:1/4/100#和/13/200,代表冠军竞猜号码“4”号,分数100; 冠亚和竞猜号码“13”,分数200。

                let str = '11321456910'
                let reg = /([3-9]|1[0-9])/g

                // let reg = new RegExp(/([3-9]|1[0-9])/g)
                // let res = reg.exec(str)
                let res = str.match(reg)

                // let ranking = res[1]
                // let bets = res[2]
                // let gold = res[3]
                //
                // let rankingArr = ranking.split('')
                // let betsArr = bets.split('')


                console.log(res.length , str.length)
            },
            check () {
                let token = sessionStorage.getItem('token')
                if (token) {
                    let userType = sessionStorage.getItem('user_type')
                    if (userType === 'user') {
                        this.$router.replace({name: 'user-center'})
                    } else if (userType === 'room') {
                        this.$router.replace({name: 'room-center'})
                    } else {
                        this.$router.replace({name: 'admin-center'})
                    }
                }
            },
            login () {
                this.logining = false
                if (! this.username) {
                    this.toast('用户名不能为空')
                    return false
                }

                if (! this.password) {
                    this.toast('密码不能为空')
                    return false
                }

                // if (this.captcha.toUpperCase() !== this.checkCaptcha.toUpperCase()) {
                //     this.toast('验证码错误')
                //     this.vcode()
                //     return false
                // }

                const params = new URLSearchParams()
                params.append('user_name', this.username)
                params.append('password', this.password)

                this.$http.post(apiUrl.api.login, params).then(res => {
                    if (res.data.code !== 0) {
                        this.toast(res.data.msg)
                    } else {
                        let userType
                        if (res.data.result.type === 2) {
                            userType = 'room'
                        } else if (res.data.result.type === 3) {
                            userType = 'admin'
                        } else {
                            userType = 'user'
                        }

                        if (!userType) {
                            return Toast('网络错误')
                        }

                        let timestamp3 = new Date().getTime() + res.data.result.expire_in * 1000

                        // 存储用户状态
                        sessionStorage.setItem('token', res.data.result.token) // token
                        sessionStorage.setItem('user_type', userType)   // 用户类型
                        sessionStorage.setItem('user_status', res.data.result.status)  // 用户状态
                        sessionStorage.setItem('user_id', res.data.result.user_id)  // 用户名
                        sessionStorage.setItem('user_name', res.data.result.user_name)  // 用户名
                        sessionStorage.setItem('expire_in', timestamp3)  // 过期时间

                        // 跳转
                        if (this.$route.query.redirect) {
                            this.$router.replace({path: this.$route.query.redirect})
                        } else {
                            if (userType === 'user') {
                                this.$router.replace({name: 'user-center'})
                            } else if (userType === 'room') {
                                this.$router.replace({name: 'room-center'})
                            } else {
                                this.$router.replace({name: 'admin-center'})
                            }
                        }
                    }
                    this.vcode()
                }).catch(err => {
                    Toast('网络错误')
                })
            },
            vcode () {
                this.checkCaptcha = captcha(4)
            },
            toast (msg) {
                let instance = Toast(msg)
                setTimeout(() => {
                    instance.close();
                    this.$set(this, 'logining', false)
                }, 1000);
            }
        }
    }
</script>

<style scoped lang="less">
    @import '../../assets/css/bases';
    .login-box {
        .field {
            .vcode {
                border: none;
                background: white;
                outline: none;
                font-size: @default;
            }
        }
        .btn {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: @lager;
            width: 100%;
            .normal {
                width: 80%;
                .btn-box {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .more {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: @middle;
            width: 100%;
            .link {
                width: 80%;
                a {
                    color: @error;
                }
            }
        }
    }
</style>